<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <VDisOrEnd
              v-if="RecordType.makeAccount"
              :id="dispatchInfo.workflowInfoVo?.fromId"
              :assigneeFlag="dispatchInfo.workflowInfoVo?.assigneeFlag"
              typeName="报销申请单"
            ></VDisOrEnd>
            <div
              class="topTitle"
              v-else
            >
              报销申请单详情
            </div>
            <div
              class="basin_info"
              style="padding: 20px"
            >
              <div
                class="tableBox"
                v-if="dispatchInfo.reimburseType != '0'"
              >
                <div class="firstBox">杭州国家版本馆报销单</div>
                <div class="secondBox">
                  <div>部门名称：{{ dispatchInfo.deptName }}</div>
                  <div>报销日期：{{ handleTime(dispatchInfo.submitTime) }}</div>
                </div>
                <div class="thirdBox">
                  <div class="thirdLeft">报销内容</div>
                  <div class="thirdRight">金额（元）</div>
                  <div class="thirdRightA">单据张数</div>
                </div>
                <div
                  class="thirdBox"
                  v-for="(i, index) in dispatchInfo.reimburseDetailList"
                  :key="index"
                >
                  <div class="thirdLeft">{{ i.reimburseContent }}</div>
                  <div class="thirdRight">{{ i.salary }}</div>
                  <div class="thirdRightA">{{ i.piece }}</div>
                </div>
                <div class="fourthBox1">
                  <div class="fourthLeft">报销金额（人民币）:{{ dispatchInfo.amount1 }}</div>
                  <div class="fourthRight">￥：{{ dispatchInfo.amount }}</div>
                </div>
              </div>
              <div
                class="onBusinessBox"
                v-else
              >
                <div class="boxA">杭州国家版本馆报销单</div>
                <div class="boxB">
                  <div style="margin-right: 150px">
                    <span style="margin-right: 150px">报销时间：</span>
                    <span>{{ handleTime(dispatchInfo.submitTime) }}</span>
                  </div>
                </div>
                <div class="boxC">
                  <div class="boxCA">部门名称</div>
                  <div class="boxCB">{{ dispatchInfo.deptName }}</div>
                  <div class="boxCC">出差人</div>
                  <div class="boxCD">{{ dispatchInfo.errandName }}</div>
                  <div class="boxCF">事由</div>
                  <div class="boxCE">
                    <NEllipsis style="max-width: 100%">
                      {{ dispatchInfo.remark }}
                    </NEllipsis>
                  </div>
                </div>
                <div class="boxD">
                  <div class="boxDA">起讫日期</div>
                  <div class="boxDA">起讫地点</div>
                  <div class="boxDB">天数</div>
                  <div class="boxDC">
                    <div class="boxDCA">交通费</div>
                    <div class="boxDCB">
                      <div class="leftA">交通工具</div>
                      <div class="leftB">金额</div>
                    </div>
                  </div>
                  <div class="boxDC">
                    <div class="boxDCA">住宿费</div>
                    <div class="boxDCB">
                      <div class="leftA">发票金额</div>
                      <div class="leftB">实报金额</div>
                    </div>
                  </div>
                  <div class="boxDB">伙食费</div>
                  <div class="boxDD">
                    <div class="DDItem">杂费</div>
                    <div class="DDItemA">实报金额</div>
                  </div>
                  <div class="boxDC">
                    <div class="boxDCA">其他</div>
                    <div class="boxDCB">
                      <div class="leftA">事项</div>
                      <div class="leftB">金额</div>
                    </div>
                  </div>
                  <div class="boxDE">合计</div>
                </div>
                <div
                  class="boxE"
                  v-for="(i, index) in dispatchInfo.reimburseDetailList"
                  :key="index"
                >
                  <div class="boxEA">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ handleDate(i.startTime, i.endTime) }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ handleDate(i.startTime, i.endTime) }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxEA">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ handleDate(i.startAddress, i.endAddress) }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ handleDate(i.startAddress, i.endAddress) }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxEB">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.days }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.days }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div
                    class="boxED"
                    style="font-size: 14px"
                  >
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.vehicles }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.vehicles }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxED">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.vehiclesFee }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.vehiclesFee }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxED">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.invoice }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.invoice }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxED">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.amount }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.amount }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxEB">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.boardExpenses }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.boardExpenses }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxEB">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.sundryFee }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.sundryFee }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxED">
                    <NEllipsis
                      :line-clamp="1"
                      style="max-width: 390px"
                    >
                      {{ i.others }}
                      <template #tooltip>
                        <div style="max-width: 390px">
                          {{ i.others }}
                        </div>
                      </template>
                    </NEllipsis>
                  </div>
                  <div class="boxED">
                    {{ i.othersFee }}
                  </div>
                  <div class="boxEC">
                    {{ i.amountSum }}
                  </div>
                </div>
                <div class="boxF">
                  <div class="boxFA">小计</div>
                  <div class="boxFB">
                    {{ vehiclesFee }}
                  </div>
                  <div class="boxFB">
                    {{ invoice }}
                  </div>
                  <div class="boxFB">
                    {{ amount }}
                  </div>
                  <div class="boxFD">
                    {{ boardExpenses }}
                  </div>
                  <div class="boxFD">
                    {{ sundryFee }}
                  </div>
                  <div class="boxFB"></div>
                  <div class="boxFB">
                    {{ othersFee }}
                  </div>
                  <div class="boxFC">
                    {{ amountSum }}
                  </div>
                </div>
                <div class="fourthBox">
                  <div class="fourthLeft">报销金额合计（大写）:{{ dispatchInfo.amount1 }}</div>
                  <div class="fourthRight">小写 ￥：{{ dispatchInfo.amount }}</div>
                </div>
              </div>
            </div>
            <div class="basin_info">
              <div style="display: flex; align-items: center">
                <div class="basin_five_left">
                  <div class="box">
                    <span>申请人部门：</span>
                    <NEllipsis
                      style="max-width: 100%"
                      placement="left"
                    >
                      {{ dispatchInfo.deptName }}
                    </NEllipsis>
                  </div>
                </div>
                <div class="basin_five_left">
                  <div class="box">
                    <span>申请人：</span>
                    <span>{{ dispatchInfo.userName }}</span>
                  </div>
                </div>
                <div class="basin_five_left">
                  <div class="box">
                    <span>报销类型：</span>
                    <span>{{ renderType(dispatchInfo.reimburseType) }}</span>
                  </div>
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div class="basin_five_left">
                  <div class="box">
                    <span>银行卡号：</span>
                    <NEllipsis
                      style="max-width: 100%"
                      placement="left"
                    >
                      {{ dispatchInfo.bankCardNumber || '-' }}
                    </NEllipsis>
                  </div>
                </div>
                <div class="basin_five_left">
                  <div class="box">
                    <span>开户行：</span>
                    <span>{{ dispatchInfo.openingBank || '-' }}</span>
                  </div>
                </div>
                <div class="basin_five_left">
                  <div class="box">
                    <span>开户名：</span>
                    <span>{{ dispatchInfo.accountName || '-' }}</span>
                  </div>
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div
                  class="box"
                  v-if="dispatchInfo.reimburseType != '2'"
                >
                  <span>关联申请：</span>
                  <div style="display: 1">
                    <a
                      style="cursor: pointer; color: #0000ee"
                      v-for="(i, index) in AboutList"
                      :key="index"
                      @click="goRun(i)"
                    >
                      {{ i.key }}
                      <p></p>
                    </a>
                  </div>
                </div>
              </div>
              <div
                :key="i.id"
                v-for="(i, index) in dispatchInfo.reimburseDetailList"
              >
                <div style="display: flex; align-items: center; margin-top: 20px">
                  <div class="box">
                    <div style="margin-bottom: auto">
                      <span>报销附件{{ index + 1 }}：</span>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 15px 0">
                      <VAttachments :attach-list="i.fileList"></VAttachments>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="topTitle">审批信息</div>
            <div class="approve">
              <div class="box">
                <span>审批状态</span>
                <span style="font-size: 20px">{{ dispatchInfo.workflowInfoVo?.status }}</span>
              </div>
              <div class="box">
                <span>审批流程</span>
                <div style="color: #5fb17f; font-size: 20px; font-weight: 500">
                  <div
                    style="display: inline"
                    v-for="(item, index) in dispatchInfo.workflowInfoVo?.workflowList"
                    :key="index"
                  >
                    <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                      {{ item.key }}
                    </span>
                    <span v-if="index != dispatchInfo.workflowInfoVo?.workflowList.length - 1">
                      →
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="topTitle">审批记录</div>
            <div class="table">
              <NDataTable
                :bordered="false"
                :columns="columns"
                :data="tableData"
                :pagination="false"
                striped
                :rowKey="rowKey"
              />
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="start">
      <NButton
        style="width: 78px; color: #5fb17f"
        ghost
        @click="goBack"
      >
        <template #icon>
          <img
            :src="VBackImg"
            style="width: 25px; height: 25px"
          />
        </template>
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { NSpace, NButton, NScrollbar, NDataTable, useMessage, NSpin, NEllipsis } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { nextTick, ref, watch } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import VBackImg from '@/assets/images/back.png'
import { RecordType } from '@/router/utils'
import VAttachments from '@/views/OA/Common/Attachments.vue'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
const tableData = ref([])
const rowKey: any = (row: any) => row.id || ''
const columns: DataTableColumns = [
  {
    title: '类型',
    key: 'type',
    width: 50
  },
  {
    title: '人员',
    key: 'userName',
    width: 50
  },
  {
    title: '时间',
    key: 'time',
    width: 100
  },
  {
    title: '结果',
    key: 'result',
    width: 50
  },
  {
    title: '备注',
    key: 'remark',
    width: 150
  }
]

//报销日期
const handleTime = (val: any) => {
  if (!val) return
  const tmp = val.split(' ')[0].split('-')
  const tmp1 = tmp[0] + '年' + tmp[1] + '月' + tmp[2] + '日'
  return tmp1
}
//起讫日期、地点
const handleDate = (valueA: any, valueB: any) => {
  return (valueA || '/ ') + '至' + (valueB || ' /')
}
// 获取详情
const spinShow = ref(false)
const dispatchInfo: any = ref([])
const vehiclesFee: any = ref()
const invoice: any = ref()
const amount: any = ref()
const boardExpenses: any = ref()
const sundryFee: any = ref()
const othersFee: any = ref()
const amountSum: any = ref()
const getInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'accountItem',
    uri: {
      id: route.query.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  const tmpRemark = res.data.remark
  res.data.remark = ''
  dispatchInfo.value = res.data

  // 判断老数据不可解析情况--------------
  function checkChars(str: string) {
    let regex = /^\[/g
    return regex.test(str)
  }
  if (dispatchInfo.value.errandName) {
    if (checkChars(dispatchInfo.value.errandName)) {
      let errandName = JSON.parse(dispatchInfo.value.errandName)
      let tempArr: Array<string> = []
      errandName.forEach((item: { typeName: string }) => {
        tempArr.push(item.typeName)
      })
      dispatchInfo.value.errandName = tempArr.join(',')
      console.log(dispatchInfo.value.errandName)
    }
  }
  // 判断老数据不可解析情况--------------

  nextTick(() => {
    setTimeout(() => {
      const target: any = document.querySelector('.boxCE')
      const rect = target?.getBoundingClientRect()
      if (!rect) return (dispatchInfo.value.remark = tmpRemark)
      target.style.width = rect.width + 'px'
      dispatchInfo.value.remark = tmpRemark
    }, 500)
  })

  dispatchInfo.primitiveId = res.data.primitiveId
  tableData.value = dispatchInfo.value.workflowInfoVo?.approvalRecordsList || []
  const tmp = res.data?.reimburseType
  dispatchInfo.reimburseType = tmp
  if (tmp != 2) {
    await getAbout()
  }
  const detail = res.data.reimburseDetailList
  vehiclesFee.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.vehiclesFee)
  }, 0)
  invoice.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.invoice)
  }, 0)
  boardExpenses.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.boardExpenses)
  }, 0)
  sundryFee.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.sundryFee)
  }, 0)
  othersFee.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.othersFee)
  }, 0)
  amount.value = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.amount)
  }, 0)
  const tmpAA = detail.reduce((pre: any, cur: any) => {
    return Number(pre) + Number(cur.amountSum)
  }, 0)
  amountSum.value = tmpAA.toFixed(2)
  spinShow.value = false
}

const renderType = (val: any) => {
  if (val == '0') {
    return '差旅'
  } else if (val == '1') {
    return '合同'
  } else if (val == '2') {
    return '其他'
  } else if (val == '3') {
    return '公出'
  } else if (val == '5') {
    return '劳务'
  } else {
    return '接待'
  }
}
// 关联
const AboutList: any = ref([])
const getAbout = async () => {
  const [error, res] = await sendRequest({
    module: 'account',
    api: 'droplistAll',
    override: {
      params: {
        reimburseType: dispatchInfo.reimburseType,
        primitiveId: dispatchInfo.primitiveId
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  AboutList.value = res.data
  console.log(res.data)
}
// 关联跳转
const pathName: any = ref()
const goRun = (val: any) => {
  switch (dispatchInfo.reimburseType) {
    //差旅
    case '0':
      pathName.value = '/OA/Onbusiness/MineApplicationDetail'
      break
    //合同
    case '1':
      pathName.value = '/OA/Seal/SealApplicationDetail'
      break
    // 公出
    case '3':
      pathName.value = '/OA/WorkOutside/OutsideDetail'
      break
    // 接待
    case '4':
      pathName.value = '/OA/HaveDinner/HaveDinnerInfo'
      break
    // 劳务
    case '5':
      pathName.value = '/OA/Labor/LaborInfo'
      break
  }
  router.push({
    path: pathName.value,
    query: {
      id: val.value
    }
  })
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}

watch(
  () => route,
  async () => {
    if (route.path == '/OA/Account/AccountDetail' && route.query.id) await getInfo()
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10px;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18px 33px 120px;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .basin_info {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 20px;

        .basin_five_left {
          flex: 0 0 33%;
        }

        .box1 {
          display: flex;
          justify-content: flex-start;
          width: 200px;
          margin-bottom: 20px;

          span {
            width: 100px;
          }
        }

        .box {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          font-size: 16px;

          span:first-child {
            display: inline-block;
            width: 120px;
            font-weight: bold;
            color: #333333;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
            color: #55524f;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          }
        }

        .basin-left {
          .box1 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 16px;

            span:first-child {
              display: inline-block;
              width: 120px;
              font-weight: bold;
              color: #333333;
              font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            }

            span:last-child {
              display: inline-block;
              flex: 1;
              color: #55524f;
              font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            }
          }
        }
      }

      .approve {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        border-bottom: 1px dashed #bc9e70;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 50px;
          width: auto;
          height: 90px;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 12px;
          margin-right: 10px;
          margin-bottom: 20px;

          span:first-child {
            font-size: 16px;
          }

          span:last-child {
            font-weight: 500;
            color: #5fb17f;
          }
        }
      }

      .table {
        width: 80%;
        background-color: #e1e1e1;
      }
    }
  }
}

.tableBox {
  width: 100%;
  height: auto;
  border: 1px solid black;
  background-color: #fff;
}

.firstBox {
  width: 100%;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid black;
  text-align: center;
  letter-spacing: 20px;
  font-size: 28px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
}

.secondBox {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid black;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: bolder;
}

.thirdBox {
  display: flex;
  text-align: center;
  width: 100%;
  min-height: 50px;
  border-bottom: 1px solid black;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: bolder;

  .thirdLeft {
    flex: 0 0 50%;
    border-right: 1px solid black;
  }

  .thirdRight {
    flex: 0 0 25%;
    border-right: 1px solid black;
  }

  .thirdRightA {
    flex: 0 0 25%;
  }
}

.fourthBox {
  display: flex;
  width: 100%;
  min-height: 50px;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: bolder;

  .fourthLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 59%;
    border-right: 1px solid black;
  }

  .fourthRight {
    flex: 0 0 41%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.fourthBox1 {
  display: flex;
  text-align: center;
  width: 100%;
  min-height: 50px;
  font-size: 22px;
  letter-spacing: 5px;
  font-weight: bolder;

  .fourthLeft {
    flex: 0 0 50%;
    border-right: 1px solid black;
  }

  .fourthRight {
    flex: 0 0 50%;
  }
}

.onBusinessBox {
  width: 100%;
  height: auto;
  border: 1px solid black;
  background-color: #fff;
}

.boxA {
  width: 100%;
  min-height: 80px;
  border-bottom: 1px solid black;
  text-align: center;
  letter-spacing: 20px;
  font-size: 28px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
}

.boxB {
  width: 100%;
  min-height: 50px;
  border-bottom: 1px solid black;
  text-align: end;
  letter-spacing: 5px;
  font-size: 22px;
}

.boxC {
  display: flex;
  text-align: center;
  width: 100%;
  min-height: 50px;
  border-bottom: 1px solid black;

  .boxCA {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 15%;
    border-right: 1px solid black;
  }

  .boxCB {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 28%;
    border-right: 1px solid black;
  }

  .boxCC {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 8%;
    border-right: 1px solid black;
  }

  .boxCF {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 5%;
    border-right: 1px solid black;
  }

  .boxCD {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 21%;
    border-right: 1px solid black;
  }

  .boxCE {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
}

.boxD {
  display: flex;
  text-align: center;
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid black;

  .boxDA {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 15%;
    border-right: 1px solid black;
  }

  .boxDB {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 5%;
    border-right: 1px solid black;
  }

  .boxDE {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .boxDD {
    flex: 0 0 5%;
    height: auto;
    border-right: 1px solid black;
    font-size: 16px;

    .DDItem {
      min-height: 30px;
      border-bottom: 1px solid black;
    }

    .DDItemA {
      min-height: 30px;
      line-height: 30px;
    }
  }

  .boxDC {
    height: auto;
    flex: 0 0 16%;
    border-right: 1px solid black;

    .boxDCA {
      min-height: 30px;
      text-align: center;
      border-bottom: 1px solid black;
    }

    .boxDCB {
      text-align: center;
      display: flex;
      height: calc(100% - 30px);
      align-items: center;

      .leftA {
        flex: 0 0 50%;
        border-right: 1px solid black;
        font-size: 16px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .leftB {
        flex: 0 0 50%;
        font-size: 16px;
      }
    }
  }
}

.boxE {
  display: flex;
  text-align: center;
  width: 100%;
  min-height: 50px;
  border-bottom: 1px solid black;
  font-size: 16px;

  .boxEA {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 15%;
    border-right: 1px solid black;
  }

  .boxEB {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 5%;
    border-right: 1px solid black;
    font-size: 16px;
  }

  .boxED {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 8%;
    border-right: 1px solid black;
    font-size: 16px;
  }

  .boxEC {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}

.boxF {
  display: flex;
  width: 100%;
  min-height: 50px;
  border-bottom: 1px solid black;
  font-size: 16px;

  .boxFA {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 43%;
    border-right: 1px solid black;
    font-size: 24px;
  }

  .boxFB {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 8%;
    border-right: 1px solid black;
  }

  .boxFD {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 5%;
    border-right: 1px solid black;
  }

  .boxFC {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-ellipsis:not(.n-ellipsis--line-clamp)) {
  color: black !important;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis.n-ellipsis--line-clamp) {
  color: black;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis:not(.n-ellipsis--line-clamp)) {
  color: #55524f !important;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

:deep(.n-ellipsis.n-ellipsis--line-clamp) {
  color: #55524f;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
</style>
